<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>个人信息</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/mui.picker.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../css/feedback.css" />
		<style>
			.mui-content {
				margin-top: 0.08rem;
				font-size: 0.2916rem;
			}
			
			#zhaoxiang {
				height: 2rem;
			}
			
			#zhaoxiang.mui-table-view-cell {
				padding-top: 0.5rem;
				height: 130px;
			}
			
			#zhaoxiang a span:after {
				top: 40%;
			}
			
			#head_image {
				width: 90px;
				height: 90px;
				border-radius: 50px;
				margin-top: 10px;
			}
			
			.head {
				margin-top: -0.6rem;
				margin-right: 15px;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-bottom: 0.08rem;
			}
			
			#libiao li {
				height: 1.0rem;
				padding-top: 0.25rem;
			}
			
			#libiao li span {
				margin-right: 20px;
				font-size: 14px;
			}
			
			.qianming {
				width: 50%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: right;
			}
			
			.mui-table-view-cell:after {
				left: 0;
			}
			
			.mui-navigate-right:after {
				font-size: 25px;
				right: 5px;
			}
			
			.mui-table-view-cell a {
				color: #424242;
				font-size: 15px;
			}
			
			.mui-table-view-cell span {
				color: #999999;
			}
			
			#forward {
				font-size: 0.3124rem;
				font-weight: 400;
			}
			
			#male {
				color: #00c0ff;
				height: 1.1rem;
			}
			
			#female {
				color: #ff0072;
				height: 1.1rem;
			}
			
			#male div,
			#female div {
				background: url(../../../image/tubiao2.png) no-repeat;
			}
			
			.redword {
				color: #FF3300 !important;
			}
			
			.shengfen_upload {
				max-width: 100%;
				background: #FFFFFF;
				height: 200px;
				padding-top: 70px;
			}
			
			.mui-content-padded a {
				margin: 3px;
				width: 50px;
				height: 50px;
				display: block;
				text-align: center;
				background-color: #fff;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				margin: 0 auto;
			}
			
			.mui-content-padded a .mui-icon {
				margin-top: 12px;
				color: #000000;
				margin-top: -7px;
				margin-left: -6px;
			}
			
			.mui-icon {
				font-size: 60px;
			}
			
			.upload_word {
				margin: 10px auto;
				display: block;
				text-align: center;
			}
			
			.shenfen_card,
			.sign_name {
				width: 70% !important;
				height: 20px !important;
				font-size: 14px;
			}
			
			.error_shenfen_card {
				border: 1px dotted rgba(0, 0, 0, 0) !important;
			}
			
			.right_shenfen_card {
				border: 1px solid rgba(0, 0, 0, 0) !important;
			}
			
			.tishi {
				width: 93%;
				font-size: 13px;
				color: #999999;
				margin: auto;
			}
			
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
			}
			
			.mui-content {
				height: 100%;
				overflow: auto;
			}
			
			input[type=text] {
				line-height: 21px;
				width: 50%;
				height: 1rem;
				padding-bottom: 15%;
				/*padding: 10px 15px;*/
				-webkit-user-select: text;
				border: none;
				border-radius: 3px;
				outline: 0;
				background-color: #fff;
				-webkit-appearance: none;
				float: right;
				text-align: right;
				font-size: 0.28rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">个人信息</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" id="zhaoxiang">
					<a id="head_photo">头像
						<span class="mui-pull-right head">
							<img class="head-img mui-action-preview qs-image-item" id="head_image" src="../images/001.png"/>
						</span>
					</a>
				</li>
			</ul>
			<form action="">
				<ul class="mui-table-view" id="libiao">
					<li class="mui-table-view-cell">
						<a id="geren_name">昵称：<input class="mui-pull-right" id="nicheng" type="text" readonly>
						</a>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a id="geren_name">手机号：<input class="mui-pull-right" id="phone" type="text" readonly>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a>性&nbsp;&nbsp;&nbsp;&nbsp;别：<input class="mui-pull-right" id="sex" type="text" readonly>
						</a>
					</li>

					<li class="mui-table-view-cell">
						<a id="signatureLi">真实姓名：<input type="text" class="sign_name error_shenfen_card mui-input" placeholder="" id="sign_name" readonly></a>
					</li>
					<li class="mui-table-view-cell">
						<a id="signatureLi">所属医院：<input type="text" class="shenfen_card error_shenfen_card" placeholder="" id="danwei_card" readonly></a>
					</li>
				</ul>
			</form>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/xiangyingshi.js"></script>
		<script type="text/javascript" src="../js/constants.js"></script>
		<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="../js/mui.picker.js"></script>
		<script type="text/javascript" src="../js/mui.poppicker.js"></script>
		<script type="text/javascript" src="../js/exif.js"></script>
		<script type="text/javascript" src="../js/mobileBUGFix.mini.js"></script>
		<script type="text/javascript" src="../js/sharemethods.js"></script>
		<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>

		<script type="text/javascript" src="../plugs/qs/qs.feedback.js"></script>

		<script>
			var user = JSON.parse(localStorage.getItem("USER"));
			var imgurl = serverAddress + uploadImgFileUrl;
			mui.plusReady(function() {
				mui(".mui-content").on("click", "#head_image", function() {
					var id = this.id
					uploadImg(imgurl, function(imgPath, datas) {
						if(datas.result == 'success') {
							var sussess = function(data) {
								//服务器返回响应，根据响应结果，分析是否登录成功；
								if(data.result == "success") {
									var path = serverAddress + $$.processImagePath(datas.obj.path)
									document.getElementById(id).src = path;
									var user = JSON.parse(localStorage.getItem("USER"))
									user.userfaceimage = datas.obj.path;
									localStorage.setItem('USER', JSON.stringify(user));
									var i = plus.webview.getWebviewById("subpages/tab-webview-subpage-my.html");
									i.reload(true)
									mui.toast("头像修改成功");
								} else {
									mui.toast("头像修改失败");
								}
							};
							commonHttpUtils(changeimgeUrl, "post", {
								path: datas.obj.path
							}, sussess, error);
						} else {
							mui.toast("文件上传失败");
						}
					});
				});

				var reaload = function() {
					var user = JSON.parse(localStorage.getItem("USER"))
					if(user.userfaceimage) {
						var path = serverAddress + $$.processImagePath(user.userfaceimage)
						$('#head_image').attr('src', path);
					}
				}

				reaload();
			});

			var user_img, username, leixing, nameinput, shenfen_cardinput, touxiang_img = [];
			// 旧头像
			var imgData_old = "";
			// 新头像
			var imgData_new = "";
			mui.init({
				keyEventBind: {
					backbutton: true //打开back按键监听
				}
			});
			mui.plusReady(function() {
				plus.webview.currentWebview().setStyle({
					softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度
				});
				if(plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式
					// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
					topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
					document.querySelector("header").style.height = topoffset;
					document.querySelector("header").style.paddingTop = "20px";
					document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = topoffset;
				}

				// 加载完毕后关闭等待框，并展示页面
				var currentView = plus.webview.currentWebview();
				currentView.show('slide-in-right', 200);
				plus.nativeUI.closeWaiting();

				$('#nicheng').val(user.nickname)
				$('#sign_name').val(user.name)
				if(user.sex == '0') {
					$('#sex').val('女')
				} else {
					$('#sex').val('男')
				}
				$('#phone').val(user.phone)

				var url = serverAddress + "/api/patient/gethosnames";
				mui.ajax(url, {
					data: {},
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 180000, //超时时间设置为30秒；
					success: function(data) {
						//服务器返回响应，根据响应结果，分析是否登录成功；
						data.forEach(function(v) {
							if(v.value == user.hid) {
								$('#danwei_card').val(v.text)
							}
						})
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						mui.toast('获取医院网络超时，请稍后再试！');
						plus.nativeUI.closeWaiting();
					}
				});
			});
		</script>
	</body>

</html>